<!--
 * @Description: 嵌入页面导航栏
 * @Pramas: iconName 图标名称 className 图标样式
 * @Author: 黄勇
 * @Date: 2019-07-19 10:28:03
 * @LastEditTime: 2020-04-01 22:35:50
 * @LastEditors: 黄勇
 -->
<template>
     <div class="implant">
        <div class="top-menu" :class="pageInfo.menuStyleClass?pageInfo.menuStyleClass:''">
            <div class="top-menu__info">
                <img v-if="pageInfo.imgSrc" :src="pageInfo.imgSrc" style="width: 30px;height: 30px;margin-right: 5px;">
                <app-icon v-else :iconName="pageInfo.icon || 'vcloud-peizhishujuyuan'"
                 className="top-menu__info--icon"
                 ></app-icon>
                <span class="top-menu__info--text">{{pageInfo.pageName}}</span>
            </div>
            <app-icon v-if="pageInfo.isShowHelp" 
                 iconName="vcloud-help"
                 className="top-menu__help"
                 ></app-icon>
            <div v-if="pageInfo.menuStyleClass!='experienceMenuStyle'" v-for="menu in menuData" 
            :class="['top-menu__link text-center cursor-pointer',{checked: menu.checked}]"
             @click="menuClick(menu)" :key="menu.name">
                {{menu.name}}
            </div>
            <div v-if="pageInfo.menuStyleClass=='experienceMenuStyle'" v-for="menu in menuData" 
            :class="['top-menu__link text-center cursor-pointer',{checked: menu.checked}]"
             @click="menuClick(menu)" :key="menu.name">
                <div>
                    {{menu.name}}
                </div>
            </div>
            <el-button @click="pageInfo.experienceMenuBtnClick" class="experienceMenuStyle_btn" v-if="pageInfo.menuStyleClass=='experienceMenuStyle'" :round="true" type="primary">开通体验</el-button>
        </div>
        <div class="main">
            <div v-if="activeRouter && activeRouter.group && activeRouter.group.length" class="left-menu">
                <a v-for="item in activeRouter.group" 
                 :key="item.name"
                :class="['left-menu__link', {'router-link-active ': $route.fullPath === item.routerPath}]"
                @click="goRouterPath(item.routerPath)">
                <app-icon :iconName="item.iconName" className="left-menu__icon"/>
                {{item.name}}
                </a>
            </div>
         <div class="right-content">
             <AppIframe v-if="iframeSrc" :iframeSrc="iframeSrc"/>
        </div>
    </div>
    </div>
</template>

<script>
import {
    createNamespacedHelpers
} from "vuex";
const {
    mapState,
    mapMutations
} = createNamespacedHelpers("user");
import AppIframe from "@/components/AppCommon/AppIframe.vue"
import RefreshJsessionIdMixins from "@/mixins/refreshJsessionId"
    export default {
        name: "implant-menu",
        mixins: [RefreshJsessionIdMixins],
        props: {
            pageInfo: {
                type: Object,
                required: true
            },
            menuData: {
                type: Array,
                required: true
            },
            
        },
        data: () => ({
            iframeSrc: ""
        }),
        components: {
            AppIframe  
        },
        computed: {
            ...mapState([
               "ssoV5Url",
               "ssoV5UrlObj"
            ]),
            activeRouter() {
                return this.menuData && this.menuData.find(menu => menu.checked);
            }
        },
        watch:{
            activeRouter:{
                handler(val,old){
                    if(val&&!old)this.setActiveIframeSrc();
                },
                deep:true,
                immediate:true
            }
        },
        created() {
            this.getDdV5SsoToken();
        },
        mounted(){
        },
        methods: {
            ...mapMutations([
            "SET_SSOV5URL",
            "SET_SSOV5URLOBJ"
            ]),
            menuClick(menu) {
                this.iframeSrc = "";
                this.$nextTick(() => {
                    this.$emit('menuCheck', menu)
                    if(menu.routerPath){
                        this.$router.push({
                            path: menu.routerPath
                        })
                    }
                    this.setActiveIframeSrc();
                });
                
            },
            goRouterPath(path) {
                this.iframeSrc = "";
                this.$nextTick(() => {
                    if(path){
                        this.$router.push({
                            path: path
                        })
                    }
                    this.setActiveIframeSrc();
                });
            },
            setActiveIframeSrc() {
                let url = this.ssoV5Url;
                if(!url)return
                if(!this.activeRouter) return
                if(!(this.activeRouter &&this.activeRouter.group && this.activeRouter.group.length)) {
                    if(this.activeRouter.isNoSSO){
                        this.iframeSrc =this.activeRouter.iframeSrc;
                    }else{
                        this.iframeSrc =  url + encodeURIComponent(this.activeRouter.iframeSrc);
                    }
                    this.$nextTick(() => {
                        this.getDdV5SsoToken();
                    })
                    return 
                };
                let group = this.activeRouter.group;
                let route = this.$route;
                let checkedRoute = group.find(item=> item.routerPath === route.fullPath);
                if(checkedRoute.isNoSSO){
                    this.iframeSrc = checkedRoute.iframeSrc;
                }else{
                    this.iframeSrc =  url + encodeURIComponent(checkedRoute.iframeSrc);
                }
                this.$nextTick(() => {
                    this.getDdV5SsoToken();
                })
                
            }
        }
    };
</script>

<style lang="scss" src="../assets/styles/implant/index.scss" scoped></style>
